<template>
  <el-dialog
    title="PLC管理"
    :visible.sync="visible"
    width="887px"
    append-to-body
    custom-class="PLC_dialog"
  >
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      label-width="80px"
      label-position="left"
    >
      <el-table
        :data="plcList"
        style="width: 100%"
        size="small"
      >
        <!-- <el-table-column prop="confEquId" label="风机id" width="180" /> -->
        <!-- <el-table-column prop="devName" label="风机名称" width="180" /> -->
        <el-table-column prop="devCode" label="名称">
          <template slot-scope="scope">
            <el-form-item
              v-if="scope.row.rowkey === currentRowKey"
              prop="devCode"
              :rules="[
                { required: true, message: '请输选择', trigger: 'blur'}
              ]"
              style="margin-bottom: 0;"
              label-width="0"
            >
              <el-select v-model="form.devCode" placeholder="请选择" @change="devCodeChange">
                <el-option
                  v-for="item in plcParamDicts"
                  :key="item.dictValue"
                  :label="item.dictLabel"
                  :value="item.dictValue"
                />
              </el-select>
            </el-form-item>
            <span v-else>{{ scope.row.devName }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="devAddr" label="读取地址">
          <template slot-scope="scope">
            <el-form-item
              v-if="scope.row.rowkey === currentRowKey"
              prop="devAddr"
              :rules="[
                { required: true, message: '请输入读取地址', trigger: 'blur'}
              ]"
              style="margin-bottom: 0;"
              label-width="0"
            >
              <el-input v-model="form.devAddr" placeholder="读取地址" type="textarea" />
            </el-form-item>
            <span v-else>{{ scope.row.devAddr }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="type" label="类型">
          <template slot-scope="scope">
            <el-form-item
              v-if="scope.row.rowkey === currentRowKey"
              prop="type"
              :rules="[
                { required: true, message: '请选择类型', trigger: 'blur'}
              ]"
              style="margin-bottom: 0;"
              label-width="0"
            >
              <el-select v-model="form.type" placeholder="请选择">
                <el-option label="读取" :value="1" />
                <el-option label="写入" :value="2" />
              </el-select>
            </el-form-item>
            <span v-else>
              <span v-if="scope.row.type == 1">读取</span>
              <span v-if="scope.row.type == 2">写入</span>
            </span>
          </template>
        </el-table-column>
        <el-table-column v-hasPermi="['fen:plc:edit']" prop="type" label="操作" width="120">
          <template slot-scope="scope">
            <template v-if="scope.row.rowkey === currentRowKey">
              <el-button type="text" size="mini" @click="submitForm">提交</el-button>
              <el-divider direction="vertical" />
              <el-button type="text" size="mini" @click="handCancel(scope.row)">取消</el-button>
            </template>
            <template v-else>
              <el-button type="text" size="mini" @click="handEdit(scope.row)">编辑</el-button>
              <el-divider direction="vertical" />
              <el-button type="text" size="mini" @click="handleDel(scope.row)">删除</el-button>
            </template>
          </template>
        </el-table-column>
      </el-table>
      <el-button v-hasPermi="['fen:plc:edit']" type="primary" style="width:100%;border-radius: 0;" size="small" @click="addPLC">添加</el-button>
    </el-form>
  </el-dialog>
</template>

<script>
import { getPlcByDeviceId, addPlc, updatePlc, delPlcById } from '@/api/fjgs/plc.js'
import { cloneDeep } from 'loadsh'
export default {
  data() {
    return {
      visible: false,
      plcList: [],
      form: {},
      rules: {},
      fjId: null,
      plcParamDicts: [],
      //
      rowCount: 0,
      currentRowKey: null
    }
  },
  created() {
    this.getDicts('plc_param').then(response => {
      this.plcParamDicts = response.data
      console.log(response.data)
    })
  },
  methods: {
    getKey() {
      return this.rowCount++
    },
    getList() {
      this.plcList = []
      getPlcByDeviceId(this.fjId).then(res => {
        this.plcList = res.data.map(e => {
          e.rowkey = this.getKey()
          return e
        })
      })
    },
    open(fjId) {
      this.fjId = fjId
      this.getList()
      this.visible = true
    },
    devCodeChange(row) {
      console.log(this.plcParamDicts, this.form.devCode)
      this.form.devName = this.selectDictLabel(this.plcParamDicts, this.form.devCode)
    },
    addPLC() {
      if (this.currentRowKey !== null) {
        this.msgInfo('请先提交/取消当前编辑行!')
        return
      }
      const obj = {
        rowkey: this.getKey(),
        confEquId: this.fjId,
        devName: '',
        devCode: '',
        devAddr: ''
      }
      this.plcList.push(obj)
      this.form = cloneDeep(obj)
      this.currentRowKey = obj.rowkey
    },
    handEdit(row) {
      if (this.currentRowKey !== null) {
        this.msgInfo('请先提交/取消当前编辑行!')
        return
      }
      this.form = cloneDeep(row)
      this.currentRowKey = row.rowkey
    },
    handleDel(row) {
      if (this.currentRowKey !== null) {
        this.msgInfo('请先提交/取消当前编辑行!')
        return
      }
      if (row.id) {
        this.$confirm('是否确认删除名称为"' + row.devName + '"的数据项?', '警告', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(function() {
          return delPlcById(row.id)
        }).then(() => {
          this.getList()
          this.msgSuccess('删除成功')
        }).catch(() => {})
      } else {
        const idx = this.plcList.findIndex(e => e.rowkey = row.rowkey)
        this.plcList.splice(idx, 1)
      }
    },
    handCancel(row) {
      if (row.id === null) {
        const idx = this.plcList.findIndex(e => e.rowkey = row.rowkey)
        this.plcList.splice(idx, 1)
        this.currentRowKey = null
      } else {
        this.currentRowKey = null
      }
    },
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            //
            updatePlc(this.form).then(res => {
              this.currentRowKey = null
              this.getList()
              this.msgSuccess('操作成功')
            })
          } else {
            addPlc(this.form).then(res => {
              this.currentRowKey = null
              this.getList()
              this.msgSuccess('操作成功')
            })
          }
        }
      })
    }
  }
}
</script>

<style>
.PLC_dialog .el-dialog__body{
    padding: 4px;
}
</style>
